<template>
  <div class="my-tag">
    <!-- v-focus：让文本框渲染的时候 获取焦点 -->
    <input
      v-if="isShowEdit"
      class="input"
      v-focus
      type="text"
      placeholder="输入标签"
      @blur="isShowEdit = false"
      :value="value"
      @keyup.enter="handleKeyup"
    />
    <div v-else class="text" @dblclick="showEditFn">{{ value }}</div>
  </div>
</template>

<script>
/**
 * 1.双击显示输入框，输入框获取焦点
 *   1.1 给div绑定dbclick事件，切换isShowEdit 的值
 *   1.2 获取焦点  使用的自定义指令
 *
 * 2.失去焦点，隐藏输入框
 *   2.1  给输入框绑定 blur事件，改isShowEdit 为false
 *
 * 3.回显标签信息（父组件传值给子组件，子组件来回显）
 *  父组件使用v-model给子组件传值，子组件通过 value接受父组件的是，把value绑定在子组件对应的位置
 *
 * 4.内容修改，点击回车， 修改标签的信息
 *   给input绑定 @keyup.enter
 *   在事件内部 触发input事件，把文本框修改之后的值，传给父组件
 *   传值之前进行非空判断 ， 传值之后 isShowEdit改为false
 */
export default {
  data() {
    return {
      isShowEdit: false,
    }
  },
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  methods: {
    // 1.双击的时候 展示输入框
    showEditFn() {
      this.isShowEdit = true
    },
    handleKeyup(e) {
      // this.$emit('input','修改之后的值')
      // console.log(e.target.value)
      if (e.target.value.trim() === '') {
        alert('请输入标签名')
        return
      }
      this.$emit('input', e.target.value)
      this.isShowEdit = false
    },
  },
}
</script>

<style scoped lang="less">
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>